<!--管理中心-->
<template>
  <div id='manager'>
    <el-form :inline="true" ref="student" :model="student" label-width="80px" :rules="rules">
      <div class="form-item-wrapper">
        <el-form-item label="学生名">
          <el-input v-model="student.studentName"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-select v-model="student.grade" placeholder="请选择年级">
            <el-option label="大一" value="大一"></el-option>
            <el-option label="大二" value="大二"></el-option>
            <el-option label="大三" value="大三"></el-option>
            <el-option label="大四" value="大四"></el-option>
            <!-- 其他班级选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="clazz">
          <el-select v-model="student.clazz" placeholder="请选择班级">
            <el-option :label="2012" value="2012"></el-option>
            <el-option :label="2013" value="2013"></el-option>
            <el-option :label="2014" value="2014"></el-option>
            <el-option :label="2015" value="2015"></el-option>
            <el-option :label="2016" value="2016"></el-option>
            <!-- 其他班级选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-select v-model="student.major" placeholder="请选择专业" filterable>
            <!-- 使用 v-for 遍历专业数组 -->
            <el-option v-for="(major, index) in majors" :key="index" :label="major.name" :value="major.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院">
          <el-select v-model="student.institute" placeholder="请选择学院" filterable>
            <!-- 使用 v-for 遍历学院数组 -->
            <el-option v-for="(college, index) in colleges" :key="index" :label="college.name" :value="college.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="student.tel"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="student.email"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="student.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        majors: [ // 定义常见专业数组
          { id: 1, name: '计算机科学与技术' },
          { id: 2, name: '软件工程' },
          { id: 3, name: '信息安全' },
          { id: 4, name: '电子商务' },
          { id: 5, name: '网络工程' },
          { id: 6, name: '通信工程' },
          { id: 7, name: '物联网工程' },
        ],
        colleges: [ // 定义学院数组
          { id: 1, name: '计算机学院' },
          { id: 2, name: '软件工程学院' },
          { id: 3, name: '信息工程学院' },
          { id: 4, name: '电子与通信工程学院' },
          { id: 5, name: '自动化学院' },
        ],
        rules: {
          tel: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '联系方式格式不正确', trigger: 'blur' }
          ],
          major: [
            { required: true, message: '请选择学生专业', trigger: 'blur' }
          ],
          clazz: [
            { required: true, message: '请选择学生班级', trigger: 'blur' }
          ],
          grade: [
            { required: true, message: '请选择学生年级', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择学生性别', trigger: 'change' }
          ]
          // 其他表单项的校验规则
        },
        student: {},
        ispass: true,
        ruleForm2: {
          pass: '',
          checkPass: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
      // 获取传递的参数
      this.student.studentId = this.$route.query.studentId;
      this.$axios({
        url: `api/student/${this.student.studentId}`,
        method: 'get'
      }).then(res => {
        console.log(res.data.data)
        this.student = res.data.data
      }).catch(error => {
        // 处理请求失败的情况
        console.error('请求失败:', error);

      });



      console.log(this.student);
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let studentId = this.$cookies.get("cid")
            this.$axios({ //修改密码
              url: '/api/studentPWD',
              method: 'put',
              data: {
                pwd: this.ruleForm2.pass,
                studentId
              }
            }).then(res => {
              if (res.data != null) { //修改成功提示
                this.$message({
                  message: '密码修改成功...',
                  type: 'success'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      onSubmit() {
        console.log(this.student)
        this.$refs.student.validate(valid => {
          if (valid) {
            // 校验通过，执行提交操作
            console.log(this.student);
            this.$axios({
              url: '/api/student',
              method: 'put',
              data: {
                ...this.student
              }
            }).then(res => {
              this.$store.dispatch('setUserTel', this.student.tel);
              console.log(this.$store.state.userTel);
              console.log(res.data);
              // 提示用户更新成功，并确认是否跳转到学生页面
              this.$confirm('更新学生信息成功，是否跳转到学生页面？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'success'
              }).then(() => {
                // 用户点击确认按钮，执行页面跳转
                this.$router.push('/student');
              }).catch(() => {
                // 用户点击取消按钮，不执行任何操作
              });
            });
          } else {
            // 校验不通过，不执行提交操作
            this.$message.error("请检查数据格式");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
  #manager .pass label {
    color: red;
    font-size: 20px;
  }

  #manager {
    width: 910px;
    text-align: center;
    margin: 30px auto 65px;
    overflow: auto;
    /* 当内容超出容器高度时显示滚动条 */
    min-height: calc(100vh - 400px);
    /* 设置一个最小高度，保证内容不会被裁剪 */

  }

  #manager .alter {
    margin: 30px 0px;
  }

  .form-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .form-item-wrapper .el-form-item {

    margin-right: 20px;
    /* 调整表单项之间的间距 */
    margin-bottom: 15px;
    /* 调整表单项之间的垂直间距 */
    flex: 0 0 calc(50% - 10px);
    /* 让表单项每行显示两个，并留出一定的间距 */

  }
</style>